一、执行页面流程

	vue-cli基于 （ nodejs + webpack + vue.js ）

	index.html ==> main.js[enter入口] ==> App.vue

	[路由]

	***不管你进入哪个页面，都会执行index.html、main.js、app.vue的代码

	***说白了是：全局文件

二、搭建后端

	2.1 全局安装：

	　　npm install express-generator -g

	2.2 进入项目目录

		express --view=ejs server(是一个目录名称)

	2.3 启动项目

		3.1 cd 项目目录中
		3.2 npm install

	接口目录：

		server | routes | index.js 

三、来解决跨域问题
	
	3.1 前端 ： 配置代理

		3.1.1 在根目录新建vue.config.js
		3.1.2 配置
			module.exports = {
			  devServer: {
			    proxy: {
			      '/api': {
			        target: 'http://localhost:3000',
			      },
			    }
			  }
			}
		3.1.3 重启前端

	3.2 后端：cors

		3.2.1 写代码

			router.all('*', function (req, res, next) {
			  res.header('Access-Control-Allow-Origin', '*');
			  //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
			  res.header('Access-Control-Allow-Headers', 'Content-Type');
			  res.header('Access-Control-Allow-Methods', '*');
			  res.header('Content-Type', 'application/json;charset=utf-8');
			  next();
			});

		3.2.2 重启后端
			

四、文件引入
	css	
		normalize
	js  
		flexible
	图片（没有找）
	图标（没有找）

五、sass : 目的是让css写出来更方便，更好维护
	
	5.1 安装过程：注意版本号
		npm install node-sass@4.14.1 -S
		npm install sass-loader@8.x -S

六、ly-tab插件

	6.1 链接：https://github.com/ScoutYin/ly-tab
	6.2 下载：npm i ly-tab -S
	6.3 全局引入
			import LyTab from 'ly-tab'
			Vue.use(LyTab)
	6.4 配置(详情：https://github.com/ScoutYin/ly-tab)

七、样式穿透

	less (/deep/)
		父元素 /deep/ 子元素{
			
		}
	
	stylus   (>>>)
		父元素 >>> 子元素{
			
		}
	
	sass  (::v-deep )
	
		::v-deep 元素{
			
		}
		
八、swiper

	8.1 下载：npm install vue-awesome-swiper@3.1.3 --save
	8.2 引入 和 配置
	
		https://www.cnblogs.com/userGao/p/13362097.html
	
九、better-scroll

	9.1 下载
		npm install better-scroll -S
	9.2 引入
		import BScroll from 'better-scroll'
	9.3 使用
		const bs = new BScroll('.wrapper',{})
		
		*** 注意，这家伙老多问题了

十、ref

	功能：获取dom
	场景：获取dom高度|宽度...
	
十一、nextTick

	功能：获取更新后的dom
	大白话（dom更新完毕了，执行nextTick里面代码）
	场景：数据是在created中请求过来的，然后在created赋值数据渲染到template部分better-scroll，就不生效，原因：created还没有$el，所以要加入$nextTick

十二、axios二次封装
	
	只要请求加入loading

十三、slot插槽

	13.1 使用：Card.vue
		<slot>
		    <span>这么默认样式</span>
		</slot>
		
	13.2 可以修改：
		<Card>
			<span>修改了</span>
		</Card>
		
	13.3 场景：同样的东西，只是有一点小区别，可以用插槽

十四、搜索

	<form action="">
		<input type="search">
	</form>

十五、node 连接 mysql

	15.1 下载
		
		npm install mysql
		
	15.2 配置 ==》后端新建sql.js
	
		var mysql = require('mysql');
		var connection = mysql.createConnection({
		  host     : 'localhost',
		  user     : 'root',
		  password : 'rootroot',
		  database : 'v_cq'
		});
		
		module.exports = connection;
		
	15.3 sql语句(模糊搜索)
	
		select * from goods_list where goods_name like "%绿茶%"'

	
	node连接数据库文档：https://github.com/mysqljs/mysql
		
	数据库管理工具：navicat premium

十六、computed 和 methods区别

	computed 有缓存的  ==》当值发生变化才会执行
	methods 没有缓存的 ==》 某一个方法执行，template执行了，methods所有方法都会执行
	
十七、升降序
		
	升序：asc
	降序：desc
	
十八、路由跳转重复
	
	报错：Error: Avoided redundant navigation to current location:
	
	解决：修改router/index.js

		cnpm install vue-router@3.0.6 -S
		
十九、搜索不会自动关闭软键盘(除了action)

	this.$refs.searchInput.blur(); 
	
二十、better-scroll的坑

    文档：https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-api.html#%E5%B1%9E%E6%80%A7
    
    
    better-scroll 默认取消click事件和scroll事件
    
    解决：
        this.BetterScroll =new BetterScroll(this.$refs.listR, {
          click:true,
          probeType:3
        })
        
二十一、vue做真机测试
    
    一、方式一：
    
        1. 查看当前机器的ipv4
        
            mac     : ifconfig 
            windows : ipconfig  
            
        2. 手机的浏览器输入
        
            http://192.168.1.1:8080
            
        ****手机和电脑在同一个wifi下
       
    二、方式二：
    
        1. 修改vue.config.js
            module.exports = {
              devServer: {
                host: '0.0.0.0', // 默认host可以不写
                port: '80',      // 更改端口，方便访问就改为80
                proxy: {
                  '/xxx': {
                    target: 'http://localhost:80', // 需要代理时，配置端口
                  }
                }
              }
            }
            
        2. 重启项目
        3. 手机的浏览器输入
        
            http://192.168.1.1:8080
    
    三、方式三（package.json）
    
        "serve": "vue-cli-service serve --host 0.0.0.0",

二十二、对接短信SDK

    22.1 下载
        npm install qcloudsms_js
    22.2 引入
        var QcloudSms = require("qcloudsms_js");
    22.3 配置
   
二十三、token

    23.1 是后端生成的，用来验证用户的
    
    23.2 干什么（场景）： 验证用户
        
    23.3 token是什么？ 令牌
    
    23.4 使用流程
    
        1.客户端使用用户名跟密码请求登录
        2.服务端收到请求，去验证用户名与密码
        3.验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
        4.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
        5.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
        6.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
   
    23.5 nodejs如何成功token ( jsonwebtoken )
        
        文档：https://www.npmjs.com/package/jsonwebtoken
         
        1. 下载
            npm install jsonwebtoken
        2. 引入
            var jwt = require('jsonwebtoken');
        3. 生成
            jwt.sign(用户标示,口令,过期时间)
        4. 解码
            jwt.decode( token );
        
二十四、keep-alive
    
    24.1 是什么：缓存组件
    
    24.2 使用场景：点击后一个商品（同一个商品），进入详情页（请求接口），每次请求接口渲染数据（性能比较差）。解决：缓存组件
    
    24.3 使用
    
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    
    24.4 只要用到了keep-alive就会多俩个生命周期
    
        activated   :  进入
        deactivated :  离开
        
    24.5 缓存某些路由
    
        a> App.vue
        
            <keep-alive>
                <router-view v-if="$router.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$router.meta.keepAlive"></router-view>
        
        b> router/index.js

            meta: {
                  keepAlive: true
            }
	
******* Vue面试题 ****** 

一、vue中style中的scoped原理是啥吗? (3%)

	只要加入scoped就会在节点上，额外增加一个属性: data-v-xxxx
	
	css选择器，可以根据属性进行选择。这样就感觉造成了一个css局部化
	
二、v-show和v-if的区别
	
	v-if是创建和删除
	
	v-show是显示和隐藏
	
三、vue性能优化

	3.1 接口是展示类的数据
	
		冻结优化 : Object.freeze()
        
四、生命周期回答

    1、 系统一共8个生命周期，但是使用keep-alive会再多俩个（ activated，deactivated）
    2、 在不使用keep-alive的时候，每次进入组件会执行：beforeCreate、created、beforeMounte、mounted
    3、 如果使用了keep-alive，第一次进入组件beforeCreate、created、beforeMounte、mounted、activated
    4、 如果使用了keep-alive，第二次进入组件，只会执行activated
	
五、vue路由导航守卫（拦截）
    
    三种：
        全局导航守卫
            beforeEach
            afterEach
        路由独享
            beforeEnter
        组件内
            beforeRouteEnter
            beforeRouteUpdate
            beforeRouteLeave 

    ****每一个守卫就是一个保安（有3个参数）
           1. to    去哪个路由对象
           2. from  之前是哪个路由对象
           3. next  具体要跳转到哪个路由下

    使用场景：
    
        1、判断登录状态，进入页面前拦截
        
            订单管理，地址管理....
            
            如果是登录状态进入页面，正常访问，显示当前用户的订单数据
            如果没有登录，但是会拦截一下，让他先去登录，才能正确在页面显示该用户的订单数据
        
        2、如果已经登录，就不能在进去登录页面
            
            如果已经是登录状态了，再次进入登录页，判断直接跳转到首页。
            
六、你在项目中遇到的最大难度是什么？困难是什么？

    支付功能

 
===== 支付整个流程 ==== 

未支付 	1
待支付 	2 
支付成功 3 
支付失败 4  ||  0 

一、购物车页面点击【去结算】

	前端：

		1. 判断有没有选择商品
		2. 发送请求==》后端会返回一个订单号【存储vuex】

			总之：生成订单
			订单的状态：1

		3. 跳转到【我的订单】页面

	后端：

		1. 拿到前端给后端的数据
		2. insert into ：数据库生成订单
		3. 返回给前端一个订单号

二、点击 【提交订单】

	前端： 
		1. 判断有没有选择收货地址
		2. 发送请求( 第一个请求 )

			前端要给后端把订单号传递过去 1 ===》 2 

			总之：修改订单的状态

		3. 发送请求（ 第二个请求 ）

			前提是：后端返回的true拿到
			传递给后端的数据：订单号
            
            qs

			后端返回的一个数据：就是一个url，前端通过window.open打开整个url


		4. 在指定网页，发送请求（第三次）：给后端传递订单号

			后端会返回，支付成功或者失败


	后端：

		1. 后端拿到前端传递过来订单号，从数据库中把该订单号的那种记录的订单状态从1修改成2，然后给前端返回信息（true）

		2. 接入 支付宝SDK，会给前端返回一个url

			这个url就是支付的连接

		3. 后端会知道整个订单支付成功或者失败

			成功或者失败，都会接口支付宝sdk，跳转一个指定网页